<template>
	<view class="list-item">
		<view class="image-wrap">
			<image :src="itemData.goodsImage" mode=""></image>
		</view>
		<view class="main-wrap">
			<view class="good-name">
				{{ itemData.goodsName }}
			</view>
			<view class="category">
				{{ itemData.categoryName }}
			</view>
			<view class="good-price-num">
				<view class="good-price">
					￥{{ itemData.price }}
				</view>
				<view class="read-num">
					数量:{{ itemData.number }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
		   itemData:{
			   default:{
				   id:1,
				   image:"",
				   name:"",
				   category:"",
				   price:99,
				   number:0
			   }
		   }
		},
		methods: {
			
		}
	}
</script>

<style lang="less" >
  .list-item {
	margin: 15rpx 0;
  	width: 100%;
  	height: 180rpx;
  	background-color: #ffffff;
  	display: flex;
   // box-shadow: -2rpx -2rpx 2rpx rgb(209, 209, 209) inset;
   border-radius: 20rpx;
  
  	.image-wrap {
  		flex: 3;
  
  		image {
  			width: 100%;
  			height: 100%;
  		}
  	}
  
  	.main-wrap {
  		flex: 7;
  		padding: 10rpx 15rpx;
		padding-bottom: 20rpx;
  		// width: calc( 100% - 30rpx );
  
  
  
  
  		.good-name {
  			height: 80rpx;
  			width: 100%;
  			font-size: 30rpx;
  			 display: -webkit-box;
  			// 不换行
  			overflow: hidden;
  			-webkit-box-orient: vertical;
  			// 俩点S
  			-webkit-line-clamp: 2;
  		}
  
  		.category {
  			height: 30rpx;
  			font-size: 28rpx;
  			padding: 5rpx 10rpx;
  			padding-bottom: 5rpx;
  			// color: ;
  		}
  
  
  		.good-price-num {
  			display: flex;
  			flex-direction: row;
			justify-content: space-between;
  			align-items: center;
			padding-right: 30rpx;
  				
  			.good-price {
  				padding-right: 30rpx;
  				font-size: 36rpx;
  				color: #ff5500;
  			}
  
  			.read-num {
  				font-size: 28rpx;
  				display: flex;
  				align-items: center;
  			}
  		}
  	}
  }
</style>
